<template>
	<div class="nav-tree">
		<el-row class="tac">
			<el-col>
				<el-menu
					default-active="2"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
					background-color="#304156"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
                    <el-menu-item index="0">
						<i class="el-icon-document"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航一</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group title="分组2">
							<el-menu-item index="1-3">选项3</el-menu-item>
						</el-menu-item-group>
						<el-submenu index="1-4">
							<template slot="title">选项4</template>
							<el-menu-item index="1-4-1">选项1</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item index="3">
						<i class="el-icon-setting"></i>
						<span slot="title">导航四</span>
					</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			data: [
				{
					label: "一级 1",
					children: [
						{
							label: "二级 1-1",
						},
					],
				},
				{
					label: "一级 2",
					children: [
						{
							label: "二级 2-1",
						},
						{
							label: "二级 2-2",
						},
					],
				},
				{
					label: "一级 3",
					children: [
						{
							label: "二级 3-1",
						},
						{
							label: "二级 3-2",
						},
					],
				},
			],
			defaultProps: {
				children: "children",
				label: "label",
			},
		};
	},
	methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    mounted() {
        this.$axios.get('/api/allMember')
        .then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })
    },
};
</script>
<style lang="less">
.el-menu-vertical-demo.el-menu{
    border-right: none;
}
.el-menu-item{
    text-align: left;
}
.el-submenu{
    text-align: left;
}
</style>